<!-- 日历热力图 -->
<template>
  <ChartWrap :title-name="'日期热力图'" :chart-obj="heatmapPlot">
    <div ref="DateHotMap"></div>
  </ChartWrap>
</template>

<script>
import ChartWrap from "@/components/common/ChartWrap"
import { WEEK_ZH, DATE_HOT_MAP_DATA } from "@/utils/const";
import { G2, Heatmap } from "@antv/g2plot";
import { registerDateHotMapShape } from "@/components/common/index"
export default {
  name: "DateHotMap",
  components: {
    ChartWrap
  },
  data() {
    return {
      source: DATE_HOT_MAP_DATA,
      heatmapPlot: null
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 注册 特殊图形 registerDateHotMapShape
      registerDateHotMapShape()
      console.log(G2.getShapeFactory('polygon').getShape('boundary-polygon'))
      this.drawChart(this.source);
    },
    drawChart(data) {
      this.heatmapPlot = new Heatmap(this.$refs.DateHotMap, {
        data,
        height: 400,
        autoFit: false,
        xField: "week",
        yField: "day",
        colorField: "commits",
        reflect: "y",
        shape: "boundary-polygon",
        meta: {
          day: {
            type: "cat",
            values: WEEK_ZH,
          },
          week: {
            type: "cat",
          },
          commits: {
            sync: true,
          },
          date: {
            type: "cat",
          },
        },
        yAxis: {
          grid: null,
        },
        tooltip: {
          title: "date",
          showMarkers: false,
        },
        interactions: [{ type: "element-active" }],
        xAxis: {
          position: "top",
          tickLine: null,
          line: null,
          label: {
            offset: 12,
            style: {
              fontSize: 12,
              fill: "#666",
              textBaseline: "top",
            },
            formatter: (val) => {
              if (val === "2") {
                return "MAY";
              } else if (val === "6") {
                return "JUN";
              } else if (val === "10") {
                return "JUL";
              } else if (val === "15") {
                return "AUG";
              } else if (val === "19") {
                return "SEP";
              } else if (val === "24") {
                return "OCT";
              }
              return "";
            },
          },
        },
      });
      this.heatmapPlot.render();
    },
  },
};
</script>

<style>
</style>